<template>
  <div>
    <van-nav-bar title="购物车" />
    <template v-if="cartStore.items.length > 0">
      <van-swipe-cell v-for="item in cartStore.items" :key="item.id">
        <van-card
          :price="item.price"
          :title="item.name"
          thumb="/static/2.png"
          :num="item.quantity"
          @click-thumb="showDetail(item)"
        >
          <template #tags>
            <van-tag plain type="danger" v-if="item.color">{{ item.color }}</van-tag>
            <van-tag plain type="danger" v-if="item.type">{{ item.type }}</van-tag>
          </template>
          <template #desc>
            <div class="card-desc" v-if="item.description">{{ item.description }}</div>
          </template>
          <template #footer>
            <van-stepper v-model="item.quantity" @change="updateQuantity(item.id, $event)" />
            <van-button size="small" type="danger" @click="removeFromCart(item.id)">删除</van-button>
          </template>
        </van-card>
        <template #right>
          <van-button square type="danger" text="删除" @click="removeFromCart(item.id)" />
        </template>
      </van-swipe-cell>
      
      <div class="submit-bar">
        <div class="price">
          合计: <span class="total-price">¥{{ cartStore.totalPrice.toFixed(2) }}</span>
        </div>
        <van-button type="danger" block @click="goToCheckout">结算</van-button>
      </div>
    </template>
    <van-empty v-else description="购物车是空的" />
  </div>
</template>

<script setup>
import { useCartStore } from '../stores/cart.js'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'

const router = useRouter()
const cartStore = useCartStore()

const showDetail = (item) => {
  showDialog({
    title: item.name,
    message: `价格：${item.price}\n${item.color || item.type ? `规格：${item.color || item.type}` : ''}\n${item.description || ''}`,
    confirmButtonText: '确定'
  })
}

const updateQuantity = (productId, quantity) => {
  cartStore.updateQuantity(productId, quantity)
}

const removeFromCart = (productId) => {
  cartStore.removeFromCart(productId)
}

const goToCheckout = () => {
  router.push('/checkout')
}
</script>

<style scoped>
.cart-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}
.card-desc {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.submit-bar {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.price {
  flex: 1;
  font-size: 14px;
}
.total-price {
  color: #ee0a24;
  font-size: 18px;
  font-weight: bold;
}
</style> 